<template>
    <view class="content bgc-fff pl30 pr30 real_name_box">
        <u-form
            :model="form"
            ref="uForm"
            label-position="left"
            label-width="260"
        >
            <u-form-item required label="姓名" prop="name">
                <u-input
                    v-model="form.name"
                    :cursor-spacing="50"
                    input-align="right"
                    placeholder="请填写姓名"
                />
            </u-form-item>

            <u-form-item label="证件类型">
                <view class="t-r"><text>身份证</text></view>
            </u-form-item>

            <u-form-item required label="证件号码" prop="certNo">
                <u-input
                    v-model="form.certNo"
                    :cursor-spacing="50"
                    input-align="right"
                    placeholder="请填写您的证件号码"
                />
            </u-form-item>

            <u-form-item required label="银行卡号" prop="cardNo">
                <u-input
                    v-model="form.cardNo"
                    :cursor-spacing="50"
                    input-align="right"
                    placeholder="请填写您的银行卡号"
                />
            </u-form-item>

            <!-- <u-form-item required label="证件有效期类型" prop="certValidityType">
				<u-radio-group v-model="form.certValidityType" active-color="#23bbb3">
					<u-radio v-for="item in IDList" :key="item.value" :name="item.value" :disabled="item.disabled"
						label-size="27" icon-size="22">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item required label="证件有效期起始日" prop="certBeginDate">
					<view class="t-r" @click="handSeletDate('begin')"><text>{{form.certBeginDate || '请选择证件有效期起始日'}}</text></view>
			</u-form-item>
			
			<u-form-item required label="证件有效期到期日" prop="certEndDate">
					<view class="t-r" @click="handSeletDate('end')"><text>{{form.certEndDate || '请选择证件有效期到期日'}}</text></view>
			</u-form-item>

			<u-form-item required label="邮箱" prop="email">
				<u-input v-model="form.email" :cursor-spacing="50" input-align="right" placeholder="请填写邮箱" />
			</u-form-item> -->
        </u-form>

        <view class="mt60"></view>

        <u-button
            :disabled="loading"
            :loading="loading"
            :custom-style="{
                ...customStyle,
                backgroundColor: loading ? 'rgba(35,187,175,0.5)' : '#23bbb3',
            }"
            @click="handSubmit"
        >
            提交
        </u-button>

        <u-picker
            v-model="show"
            mode="time"
            @confirm="handConfirmDate"
        ></u-picker>
    </view>
</template>

<script>
import { realNameApi } from "./api/index.js";
export default {
    data() {
        return {
            customStyle: {
                color: "#ffffff",
                width: "80%",
            },
            loading: false,
            show: false,
            dateClass: "",
            form: {
                userId: uni.getStorageSync("userId"),
                name: "",
                certType: "00",
                certNo: "",
                cardNo: "",
                mobileNo: uni.getStorageSync("phone"),
                // certValidityType: '1',
                // certBeginDate: '',
                // certEndDate: '',
                // email: ''
            },
            option: {},
            IDList: [
                {
                    name: "长期有效",
                    value: "1",
                    disabled: false,
                },
                {
                    name: "非长期有效",
                    value: "0",
                    disabled: false,
                },
            ],
            rules: {
                name: [
                    {
                        required: true,
                        message: "请填写姓名",
                        trigger: ["change", "blur"],
                    },
                ],
                certNo: [
                    {
                        required: true,
                        pattern:
                            /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[0-9X]$/,
                        message: "请填写正确的证件号码",
                        trigger: ["change", "blur"],
                    },
                ],
                cardNo: [
                    {
                        required: true,
                        pattern: /^\d{9,19}$/,
                        message: "请填写正确的银行卡号",
                        trigger: ["change", "blur"],
                    },
                ],
                // certBeginDate: [{
                // 	required: true,
                // 	message: '请填写证件有效期起始日',
                // 	trigger: ['change', 'blur']
                // }],
                // certEndDate: [{
                // 	required: true,
                // 	message: '请填写证件有效期到期日',
                // 	trigger: ['change', 'blur']
                // }],
                // email: [{
                // 	required: true,
                // 	pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                // 	message: '请填写正确的邮箱',
                // 	trigger: ['change', 'blur']
                // }]
            },
        };
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
    onLoad(option) {
        this.option = option;
    },
    onShow() {},
    methods: {
        async handSubmit() {
            this.$refs.uForm.validate(async (valid) => {
                if (valid) {
                    try {
                        uni.showLoading({
                            title: "认证中...",
                        });
                        this.loading = true;
                        const { code, data } = await realNameApi(this.form);
                        if (code == 0) {
                            uni.showToast({
                                title: "认证成功",
                            });
                            setTimeout(() => {
                                uni.navigateBack();
                            }, 1000);
                        }
                    } catch (e) {
                        //TODO handle the exception
                    } finally {
                        this.loading = false;
                        uni.hideLoading();
                    }
                }
            });
        },
        handConfirmDate(e) {
            const { year, month, day } = e;
            const time = `${year}${month}${day}`;
            switch (this.dateClass) {
                case "begin":
                    this.form.certBeginDate = time;
                    break;
                default:
                    this.form.certEndDate = time;
                    break;
            }
        },
        handSeletDate(e) {
            this.dateClass = e;
            this.show = true;
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    width: 100vw;
    height: 100vh;
    overflow: auto;
}
</style>
